<template>
    <view class="base_info">
        <view class="row flex_b">
            <view class="row_l">工种</view>
            <view class="row_r">{{ orderDetail.workType }}</view>
        </view>
        <view class="row flex_b">
            <view class="row_l">用工时间</view>
            <view class="row_r">{{ orderDetail.workDate }}</view>
        </view>
        <view class="row flex_b">
            <view class="row_l">用工地点</view>
            <view class="row_r">{{ orderDetail.workPlace }} {{ orderDetail.address }}</view>
        </view>
    </view>
    <view class="base_info">
        <view class="row flex_b">
            <view class="row_l">付费模式</view>
            <view class="row_r" style="color: #FE6E04;">{{ orderDetail.feeType == 1 ? '一口价' : '计件' }}</view>
        </view>
        <view class="row flex_b">
            <view class="row_l">{{ orderDetail.feeType == 1 ? '需要人数' : '件数' }}</view>
            <view class="row_r">{{ `${orderDetail.peopleNum}${orderDetail.feeType == 1 ? '人' : '件'}` }}</view>
        </view>
        <view class="row flex_b">
            <view class="row_l">我愿出价<text>（总价）</text></view>
            <view class="row_r">{{ orderDetail.money }}元</view>
        </view>
    </view>
    <view class="introduction">
        <view class="_title">内容介绍</view>
        <view class="_introduction">{{ orderDetail.introduction }}</view>
    </view>
    <view class="remark">
        <view class="_title">需求备注</view>
        <view class="_remark">{{ orderDetail.orderDsg }}</view>
        <view class="common_image_list">
            <myUploadImg :imgList="imgList" disabled preview></myUploadImg>
        </view>
    </view>
</template>

<script setup lang="ts">
import type { OrderParams } from "@/types/order";
import { ref, toRefs, watch } from "vue";
import myUploadImg from "@/components/my-uploadImg/my-uploadImg.vue";
const props = defineProps<{
    orderDetail: OrderParams
}>()
const { orderDetail } = toRefs(props)
const imgList = ref<string[]>([])

watch(orderDetail, (newVal: any) => {
    if (newVal.customerImages) {
        imgList.value = newVal.customerImages.split(",")
    }
})

</script>

<style lang="scss" scoped>
.base_info {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;
}

.row {
    width: 100%;
    min-height: 96rpx;
    border-bottom: 2rpx solid #F8F8F8;
    font-size: 28rpx;
    color: #222222;

    &:nth-last-child(1) {
        border: none;
    }

    &_l {
        width: 35%;

        text {
            font-size: 24rpx;
            color: #888888;
        }
    }

    &_r {
        width: 65%;
        text-align: right;
    }
}

.introduction {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    padding-bottom: 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;

    ._title {
        height: 92rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        border-bottom: 2rpx solid #F8F8F8;
        line-height: 92rpx;
    }

    ._introduction {
        font-size: 26rpx;
        color: #222222;
        margin: 24rpx 0 36rpx 0;
    }
}

.remark {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    padding-bottom: 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;

    ._title {
        height: 92rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        border-bottom: 2rpx solid #F8F8F8;
        line-height: 92rpx;
    }

    ._remark {
        font-size: 26rpx;
        color: #222222;
        margin: 24rpx 0 36rpx 0;
    }
}

.common_image_list {
    width: 100%;
}
</style>